<template>
  <div>
    <!-- <webQuerySource @source="sourceMethod"></webQuerySource> -->
    <el-table :data="list" height="640" border style="width: 100%">
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="视图">
        <template slot-scope="scope">
          <div style="width: 100%; height: 100%;">
            <img :src="scope.row.img">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="size" label="大小"></el-table-column>
      <!-- <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true"></el-table-column> -->
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="ps" @current-change="listMethod">
    </el-pagination>
  </div>
</template>
<script>
import apis from "@utils/apis";
// import webQuerySource from "@comps/cms/WebQuerySource.vue";

export default {
  data() {
    return {
      pn: 1,
      ps: 30,
      total: 0,
      category: '',
      list: [],
    }
  },

  components: {
    // webQuerySource,
  },

  mounted() {
    this.listMethod()
  },

  beforeRouteUpdate(to, from, next) {
    this.$nextTick(() => {
      let {
        query,
      } = to
      this.category = query.category
      this.listMethod()
    })
  },

  methods: {
    listMethod(page) {
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.pn = page || 1
      apis.ed2kersListApi({
        page: this.pn,
        num: this.ps,
        category: this.category,
      }).then(res => {
        loading.close();
        this.total = res.result.total
        this.list = res.result.docs
      })
    },
  }
}

</script>
